Question Loading...

Combining Multiple Transform Functions and Using transform-origin in CSS

In CSS, you can combine multiple transform functions together by listing them one after another inside the transform property. The transformations are applied from left to right, allowing you to move, scale, rotate, and skew elements in a single declaration.

In this example, the element is first moved 50px right and 20px down, then rotated 45 degrees, and finally scaled up by 20%. The order matters — changing the sequence of transformations can produce a different visual result.

You can use combinations of translate(), scale(), rotate(), skew(), and even 3D transformations to create dynamic effects and animations.

The transform-origin property defines the point around which a transformation (like rotation, scaling, or skewing) occurs. By default, the origin is the center (50% 50%) of the element, but you can change it to any corner, edge, or custom position.

Here, the element rotates 45 degrees around its top-left corner instead of its center. This is useful for effects like flipping doors, rotating pointers, or custom animations.

In this example, the .wheel element spins around its center smoothly when hovered. Changing the transform-origin to top left or another point would make it spin around that specific edge or corner.